<template>
<div class="tw-libmobilecatemenu"
  :class="[`x${_uid}`]">
  <div class="tw-libmobilecatemenu-list" v-for="(nav, idx) in navs">
    <div class="tw-libmobilecatemenu-title">{{nav.label}}</div>
    <div class="tw-libmobilecatemenu-desc">
      <div class="tw-libmobilecatemenu-item" v-for="(cnav, idxx) in nav.children" @click="handleClick(cnav)">
        {{cnav.label}}
      </div>
    </div>
  </div>
</div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'category-menu-mobile',

  mixins: [style],

  props,

  data() {
    return {
    }
  },

  computed: {
    style () {
      return Object.assign({
        width: this.width,
        background: this.background,
        navColor: this.navColor,
        navFontSize: this.navFontSize,
        navBorderRadius: this.navBorderRadius,
        navBorder: this.navBorder,
        lineHeight: this.lineHeight,
        marginLeft: this.marginLeft,
        padding: this.padding,
        marginTop: this.marginTop,
        titleFontWeight: this.titleFontWeight,
        titleColor: this.titleColor,
        titleFontSize: this.titleFontSize,
        titleLineHeight: this.titleLineHeight,
        listMarginTop: this.listMarginTop,
        poniterWidth: this.poniterWidth,
        poniterColor: this.poniterColor,

      }, this.paddingStyle, this.borderStyle)
    }
  },

  methods: {
    handleClick (item) {
      if (this.useClickfn && typeof this.clickFn === 'function') {
        e.preventDefault()
        this.clickFn(item, this)
      } else if (item.href) {
        let href = ''
        let hreflink = '?'
        if (item.href.includes('?')) {
          hreflink = '&'
        }
        if (this.useAccred) {
          href = hreflink + this.$twApp.user.accreditUrl
        }
        if (item.target === '_blank') {
          window.open(item.href + href, '_blank')
        } else {
          window.location.href = item.href + href
        }
      }
    },
    setStyle () {
      let mtop = '10px'
      if (parseInt(this.marginTop)) {
        mtop = (parseInt(this.marginTop) + 10) + 'px'
      }
      let style = `
        ::root.tw-libmobilecatemenu .tw-libmobilecatemenu-item {
          width: ${this.width};
          background-color: ${this.background};
          border-radius: ${this.navBorderRadius};
          padding: ${this.padding};
          color: ${this.navColor};
          font-size: ${this.navFontSize};
          line-height: ${this.lineHeight};
          border: ${this.navBorder};
          margin-left: ${this.marginLeft};
          margin-bottom: ${this.marginTop};
        }
        ::root.tw-libmobilecatemenu .tw-libmobilecatemenu-title {
          padding-left: ${mtop};
          font-weight: ${this.titleFontWeight};
          margin-bottom: ${this.marginTop};
          color:  ${this.titleColor};
          font-size: ${this.titleFontSize};
          line-height: ${this.titleLineHeight};
        }

        ::root.tw-libmobilecatemenu .tw-libmobilecatemenu-title::before {
          width: ${this.poniterWidth};
          height: ${this.poniterWidth};
          background-color: ${this.poniterColor};
        }

        ::root.tw-libmobilecatemenu .tw-libmobilecatemenu-list {
          margin-top: ${this.listMarginTop};
        }

      `

      if (this.hasBorder) {
        const border = `${this.borderSize} ${this.borderType} ${this.borderColor}`

        if (this.borderPosition.includes(0)) {
          style += `
            ::root.tw-libmobilecatemenu {
              border-top: ${border};
            }
          `
        }

        if (this.borderPosition.includes(1)) {
          style += `
            ::root.tw-libmobilecatemenu {
              border-bottom: ${border};
            }
          `
        }

        if (this.borderPosition.includes(2)) {
          style += `
            ::root.tw-libmobilecatemenu {
                border-left: ${border};
              }
            `
        }

        if (this.borderPosition.includes(3)) {
          style += `
            ::root.libmobilecatemenu {
              border-right: ${border};
            }
          `
        }

        style += `
          ::root.tw-libmobilecatemenu {
            border-radius: ${this.borderRadius};
          }
        `
      }


      this.addStyle(style)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
